import {
  ProFormText,
  ProFormTextArea,
  ModalForm,
  ProFormInstance,
  ProFormDependency,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Col, message, Row } from 'antd';
import React, { useRef } from 'react';
import { changeSeriesList } from '@/apis/car/series';
import { getBrands } from '@/apis/car/brands';
import { ActionType } from '@ant-design/pro-table';
import TranslateBtn from '@/components/translate-btn';
interface Props {
  initialValues?: any
  children: React.ReactElement
  action?: ActionType
}
const CreateForm = ({initialValues: initialValuesProps, children, action}: Props) => {
  const formRef = useRef<ProFormInstance>()
  const initialValues = initialValuesProps || {
    id: '',
    brandId: '',
    nameZh: '',
    nameEn: '',
    descriptionZh: '',
    descriptionEn: '',
  };
  const onFinish = async (values: any) => {
    const res = await changeSeriesList(values)
    if(res?.code === 0){
      message.success('操作成功')
      action?.reload();
      return true
    }
    return false
  };
  return (
    <ModalForm
      formRef={formRef}
      modalProps={{
        destroyOnClose: true,
        footer: null,
        okText: '提交',
      }} 
      title={`${initialValues?.id ? '编辑' : '新建'}车系`}
      autoFocusFirstInput
      width={800}
      trigger={children}
      onFinish={onFinish}
      initialValues={initialValues}
    >
      <ProFormText name="id" hidden />
      <Row gutter={16}>
        <Col span={12}>
          <ProFormSelect
            name="brandId"
            label="汽车品牌"
            request={async () => {
              const res = await getBrands({limit: 500})
              if(res?.code === 0){
                return res?.data?.data?.map(item=>({value: item.id, label: `${item.nameZh} (${item.nameEn})` }))
              }
              return []
            }}
            rules={[{ required: true, message: '汽车品牌必填' }]}
          />
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <ProFormText name="nameZh" label="名称 - 中文" rules={[{required: true,  message: '请输入中文名称'}]}/>
        </Col>
        <Col span={12}>
          <ProFormDependency name={['nameZh']}>
            {({ nameZh }) => {
              return (
                <ProFormText name="nameEn" label={<>名称 - 英文 <TranslateBtn value={nameZh} onChange={(val)=>{
                  formRef?.current?.setFieldValue('nameEn', val)
                }} /></>} rules={[{required: true,  message: '请输入英文名称'}]}/>
              );
            }}
          </ProFormDependency>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <ProFormTextArea name="descriptionZh" label="描述 - 中文" />
        </Col>
        <Col span={12}>
          <ProFormDependency name={['descriptionZh']}>
            {({ descriptionZh }) => {
              return (
                <ProFormTextArea name="descriptionEn" label={<>描述 - 英文 <TranslateBtn value={descriptionZh} onChange={(val)=>{
                  formRef?.current?.setFieldValue('descriptionEn', val)
                }} /></>} />
              );
            }}
          </ProFormDependency>
        </Col>
      </Row>
    </ModalForm>
  );
};

export default CreateForm;
